<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡与捕获</title>
</head>
<body>
    <fieldset>
            <legend>01.冒泡/捕获基本概念</legend>
        <div>
            <ul>
                <li>
                    冒泡/捕获
                </li>
            </ul>
        </div>
        <script>
            let html = document.documentElement;//获取html标签中的所有元素
            let body = document.body;//获取body标签中的所有元素
            let div = body.querySelector('div');//querySelector()。js原生方法,只能获取第一个指定的标签
            let ul = body.querySelector('ul');
            let li = body.querySelector('li');

            //捕获
            ul.addEventListener('click',callback,true);//true:事件句柄在捕获阶段执行。false:(默认)事件句柄在冒泡阶段执行
            li.addEventListener('click',callback,true);
            div.addEventListener('click',callback,true);
            //body.addEventListener('click',callback,true);
            //html.addEventListener('click',callback,true);

            //冒泡
            ul.addEventListener('click',callback,false);//true:事件句柄在捕获阶段执行。false:(默认)事件句柄在冒泡阶段执行
            li.addEventListener('click',callback,false);
            div.addEventListener('click',callback,false);
            //body.addEventListener('click',callback,false);
            //html.addEventListener('click',callback,false);

            function callback(event){
                let target = event.currentTarget;
                console.log(target.tagName);
                //event.stopPropagation();//可以阻止捕获和冒泡阶段中当前事件的进一步传播
            }

            //总结：先捕获，后冒泡，捕获从上到下，冒泡从下到上（形象点说法：捕获像石头沉入海底，冒泡则像气泡冒出水面）
        </script>
    </fieldset>
    
    <fieldset>
        <legend>02.冒泡/捕获案例</legend>
        <div>
            <ul id="ul">
                <li id="li">
                    冒泡/捕获案例
                </li>
            </ul>
        </div>
        <script>
            let ulObj = document.getElementById('ul');

            ulObj.addEventListener('click',function(e){
                console.log("捕获:",e.target.nodeName,e.currentTarget.nodeName);
                event.stopPropagation();//可以阻止捕获和冒泡阶段中当前事件的进一步传播
            },true);

            ulObj.addEventListener('click',function(e){
                console.log("冒泡:",e.target.nodeName,e.currentTarget.nodeName);
            },false);
            //总结:在捕获中使用event.stopPropagation();冒泡也不会执行了
        </script>
    </fieldset>
</body>

</html>